<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div class="form-group"><h2> 上传图片（最多4张）</h2><hr/></div>
						<form class="form-horizontal m-t" id="signupForm" action="/analyze/zfb/pay" method="post">
							<div class="form-group">
								<ul class="upload-ul" id="uploadUL">
									<!--默认的点击窗口
                                        在添加了图片之后，循环在这个前面insert图片的li
                                    -->
									<li class="upload-li" id="uploadBtn">
										<form class="img-input-form" enctype="multipart/form-data"  style="opacity: 0;">
											<input type="file" multiple onchange="sendFile(this)" accept="image/gif, image/jpeg, image/png" id="upload" >
											<button type="submit" class="btn btn-primary">提交</button>
										</form>
										<div class="item">
											<span class="photo-span"></span>
											<span class="circle-span"></span>
											<span class="circle-solid-span"></span>
										</div>
									</li>
								</ul>
							</div>


						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript">
		var uploadImgIndex=0;
		var imgArr = [];
		
		function selectImage(imgFile) {
			var allFile = imgFile.files;
			var totalLen = allFile.length;
			if (imgArr.length>0){
				totalLen =totalLen + imgArr.length;
			}
			if (totalLen>4){
				alert("只能上传4张图片");
				return;
			}
			for (var i = 0;i<allFile.length;i++){
				var file = allFile[i];
				if (imgArr.length>0 && imgArr.length<4) {
					imgArr.push(file)
				}

				//添加一层过滤
				var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
				if(!rFilter.test(file.type)) {
					alert("文件格式必须为图片");
					return;
				}


			}

			
		}
		function sendFile(obj) {
			var files = obj.files ;
			var size = files[0].size;
			if((size / 1024 / 1024) > 2) {
				alert("图片大小不能超过2M...");
				return false;
			}
			console.log("size="+size);
			var formData = new FormData();
			formData.append("file", files[0]);
			$.ajax({
				data : formData,
				type : "POST",
				url : "/common/sysFile/upload",    // 图片上传出来的url，返回的是图片上传后的路径，http格式
				cache : false,
				contentType : false,
				processData : false,
				dataType : "json",
				success: function(r) {//data是返回的hash,key之类的值，key是定义的文件名
					layer.msg(r.msg);
					/*$('.summernote').summernote('insertImage',data.fileName);*/

					$("#uploadUL").append('<li><div class="item image">'+
							'<img class="upload-image" src="'+r.fileName+'"/>'+
							'</div></li>>') ;
				},
				error:function(){
					alert("文件上传失败");
				}
			});
		}
		


	</script>
</body>
</html>
